<template>
  <h2>登录测试页</h2>
  <!-- <div>用户名{{ $store.userInfo }}</div> -->
  <!-- el-form 最后会被编译成 form标签 -->
  <!-- :model="form" 绑定表单数据  from 为表单数据对象-->
  <h2>用户名{{ userStore.userInfo.username }}</h2>
  <el-form :model="userData" label-width="120px">
    <!-- form中的每一项都需要使用 form-item 进行包裹 -->
    <el-form-item label="username">
      <el-input v-model="userData.username" />
    </el-form-item>
    <el-form-item label="password">
      <el-input v-model="userData.password" />
    </el-form-item>
    <el-form-item>
      <el-button @click="onSubmit">登录</el-button>
      <el-button @click="onLogout">退出登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
  import { reactive } from "vue";
  import { useUserStore } from "@/store/user.js";

  const userData = reactive({
    username: "",
    password: "",
  });

  //实例化userStore
  const userStore = useUserStore();
  console.log(userStore.userInfo);
  const onSubmit = async () => {
    await userStore.login(userData);
    userData.username = "";
    userData.password = "";
  };
  const onLogout = async () => {
    await userStore.logout();
  };
  //   return {
  //     userStore,
  //   };
  //   const onSubmit = () => {
  //     userLogin(form).then((res) => {
  //       console.log(res);
  //       ElMessage.success("登录成功");
  //     });    a
  //   };
  //   const onSubmit = async () => {
  //     // await 会等待异步函数执行完毕
  //     const res = await userLogin(form);
  //     console.log("example");
  //     console.log(res);
  //   };
</script>

<style scoped>
  form {
    width: 320px;
    margin: 0 auto;
  }
</style>
